<template>
  <div class="table-filter-date-range-comp pad-rgt-10">
    <div :class="`table-filter-${type}`">
      <el-date-picker
        v-model="vModel"
        :type="type"
        :start-placeholder="startPlaceholder"
        :end-placeholder="endPlaceholder"
        :format="destDisplayFormat"
        :value-format="destValueFormat"
        :picker-options="pickerOptions"
        size="small"
        range-separator="至"
        @change="change">
      </el-date-picker>
    </div>
  </div>
</template>

<script>
  import {momentFormat} from '@/config/common';

  export default {
    name: 'TableFilterDateRange',
    model: {
      event: 'change'
    },
    props: {
      value: {
        type: Object,
        default: () => {
          return {
            begin: '',
            end: ''
          };
        }
      },
      type: {
        type: String,
        default: 'datetimerange'
      },
      displayFormat: {
        type: String,
        default: ''
      },
      valueFormat: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        vModel: [],
        startPlaceholder: '',
        endPlaceholder: '',
        destDisplayFormat: '',
        destValueFormat: '',
        pickerOptions: {
          shortcuts: [
            {
              text: '当天',
              onClick(picker) {
                const end = new Date().toLocaleDateString();
                const start = new Date().toLocaleDateString();
                picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '本周',
              onClick(picker) {
                const end = moment().week(moment().week()).endOf('week').format(momentFormat.date);
                const start = moment().week(moment().week()).startOf('week').format(momentFormat.date);
                picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '最近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
              }
            }
          ]
        }
      };
    },
    watch: {
      value: {
        handler(val = {}) {
          this.vModel = [val.begin || '', val.end || ''];
        },
        immediate: true
      }
    },
    created() {
      this.initConfig();
    },
    methods: {
      initConfig() {
        switch (this.type) {
          case 'daterange':
            this.startPlaceholder = '开始日期';
            this.endPlaceholder = '结束日期';
            this.destDisplayFormat = this.displayFormat || 'yyyy-MM-dd';
            this.destValueFormat = this.valueFormat || 'yyyy-MM-dd HH:mm:ss';
            break;
          case 'datetimerange':
            this.startPlaceholder = '开始时间';
            this.endPlaceholder = '结束时间';
            this.destDisplayFormat = this.displayFormat || 'yyyy-MM-dd HH:mm:ss';
            this.destValueFormat = this.valueFormat || 'yyyy-MM-dd HH:mm:ss';
            break;
          default:
            break;
        }
      },
      change(val) {
        if (val) {
          let start = this.vModel[0];
          let end = this.vModel[1];
          // 如果没有设置具体的时分秒，则把结束时间改为当天的最后一秒
          const endTime = moment(end).format(momentFormat.times);
          if (endTime === '00:00:00') {
            end = moment(end).endOf('day').format(momentFormat.dateTimeDetail);
          }
          // 如果是日期范围选择，则默认开始时间为 start 一天的初始时分秒
          if (this.type === 'daterange') {
            start = moment(start).startOf('day').format(momentFormat.dateTimeDetail);
          }
          this.$emit('change', {begin: start, end: end});
        } else {
          this.$emit('change', {begin: '', end: ''});
        }
      },
      reset() {
        this.$emit('change', {begin: '', end: ''});
      }
    }
  };
</script>

<style scoped>

</style>
